<template>
  <div class="comment-item" v-if="props.info">
    <t-avatar size="56px" :image="$filters.getLinkUrl(props.info.coverUrl)"> </t-avatar>
    <div class="item-right hw-box-style-flex hw-box-style-flex-clm">
      <span class="right-name">{{ props.info.name }}</span>
      <span class="right-content">{{ props.info.content }}</span>
      <div class="hw-box-style-flex hw-box-style-flex-between" v-if="!props.BottomSlot">
        <span class="right-time">{{ props.info.createDate }}</span>
        <div>
          <span class="right-btn-title hw-click-cursor" v-show="show && !props.info.replyContent" @click="show = !show"
            >回复</span
          >
          <span class="right-btn-title hw-click-cursor" v-show="!show && !props.info.replyContent" @click="show = !show"
            >收起</span
          >
          <span class="right-btn-title hw-click-cursor" @click="deletereply">删除</span>
          <span
            class="right-btn-title1 hw-click-cursor"
            v-if="props.info.commentStatus == 1 || props.info.commentStatus == 2"
            @click="passReply"
            >通过审核</span
          >
          <span class="right-btn-title2 hw-click-cursor" v-else>已发布</span>
        </div>
      </div>
      <div v-if="!props.BottomSlot">
        <div class="hw-flex-style-b-c" v-if="props.info.replyContent">
          <span>回复：{{ props.info.replyContent }}</span>
          <span>{{ props.info.replyDate }}</span>
        </div>
        <div v-if="!show" class="edit-box">
          <t-textarea v-model="value" placeholder="请输入评论" :maxlength="500"></t-textarea>
          <div class="hw-box-end-box">
            <t-button @click="reply" :loading="loading">回复</t-button>
          </div>
        </div>
      </div>
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import { commentReply, delComment, approvedComment, rejectedComment } from '@/api/comment/comment';
import { urls } from '@/utils/request/upload';
import { ref } from 'vue';
const props = defineProps({
  info: {
    type: Object,
  },
  auditStatus: {
    type: Number,
  },
  BottomSlot: {
    type: Boolean,
    defult: false,
  },
});
const emit = defineEmits(['replySuccess']);
const loading = ref(false);
const show = ref(true);
const value = ref('');

const reply = async () => {
  //回复
  try {
    if (!value.value && !loading.value) {
      MessagePlugin.error('请输入评论内容');
      return;
    }
    loading.value = true;
    let parmas = {
      value: props.info.id,
      text: value.value,
    };
    let { statusCode } = await commentReply(parmas);
    if (statusCode == 200) {
      show.value = !show.value;
      MessagePlugin.success('回复成功');
      emit('replySuccess', parmas);
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const deletereply = async () => {
  //删除评论
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;

    let { statusCode } = await delComment(props.info.id);
    if (statusCode == 200) {
      MessagePlugin.success('删除成功');
      emit('replySuccess');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const passReply = async () => {
  //通过审核
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let { statusCode } = await approvedComment(props.info.id);
    if (statusCode == 200) {
      MessagePlugin.success('审核通过');
      emit('replySuccess');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.comment-item {
  margin-bottom: 30px;
  display: flex;
  width: 100%;
  padding: 16px;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.item-right {
  flex: 1;
  margin-left: 12px;
}
.right-name {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
  margin-bottom: 8px;
}
.right-content {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin-bottom: 15px;
}
.right-time {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}
.right-btn-title {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(210, 173, 119, 0.9);
  line-height: 22px;
  margin-left: @margin-hw-item2;
}
.right-btn-title1 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e34d59;
  line-height: 22px;
  margin-left: @margin-hw-item2;
  text-decoration: underline;
}
.right-btn-title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #dcdcdc;
  line-height: 22px;
  margin-left: @margin-hw-item2;
  text-decoration: underline;
}
.edit-box {
  margin-top: 18px;
}
.hw-box-end-box {
  margin-top: 8px;
}
.hw-flex-style-b-c {
  padding: 12px 16px;
  background: #fbf8f2;
  border-radius: 4px;
  margin-top: 18px;
}
</style>
